<template>
  <div class="cost-main-box">
    <el-drawer
      :visible.sync="isDrawer"
      :direction="direction"
      :size="this.$store.state.user.userIsPhone ? '90%' : '700px'"
      :with-header="false"
      @close="defaultData"
    >
      <div class="drawer-title">
        <div class="drawer-title">费用详情</div>
        <div class="iconfont icon-guanbi" @click="isDrawer = false"></div>
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div class="head-title">合同金额</div>
        <div>（总计：{{ total.contractTotal }}万元）</div>
        <div class="form-title" @click="addTableItem(1)">
          <i class="iconfont icon-JC_058"></i>
        </div>
      </div>
      <div class="cost-table-box">
        <CostTable
          :tableData="tableDatas.contract"
          :onpenInnerDrawer="onpenInnerDrawer"
          :proName="proName"
          :proCode="proCode"
          :projectRow="projectRow"
        />
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div>预算部分</div>
        <div>（总计：{{ total.budgetTotal }}万元）</div>
        <div class="form-title" @click="addTableItem(2)">
          <i class="iconfont icon-JC_058"></i>
        </div>
      </div>
      <div class="cost-table-box">
        <CostTable
          :tableData="tableDatas.budget"
          :onpenInnerDrawer="onpenInnerDrawer"
          :proName="proName"
          :proCode="proCode"
          :projectRow="projectRow"
        />
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div>实际支出</div>
        <div>（总计：{{ total.realityTotal }}万元）</div>
        <div class="form-title" @click="addTableItem(3)">
          <i class="iconfont icon-JC_058"></i>
        </div>
      </div>
      <div class="cost-table-box">
        <CostTable
          :tableData="tableDatas.reality"
          :onpenInnerDrawer="onpenInnerDrawer"
          :proName="proName"
          :proCode="proCode"
          :projectRow="projectRow"
        />
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div>预期回款</div>
        <div>（总计：{{ total.expectedCollTotal }}万元）</div>
        <div class="form-title" @click="addTableItem(4)">
          <i class="iconfont icon-JC_058"></i>
        </div>
      </div>
      <div class="cost-table-box">
        <CostTable
          :tableData="tableDatas.expectedColl"
          :onpenInnerDrawer="onpenInnerDrawer"
          :proName="proName"
          :proCode="proCode"
          :projectRow="projectRow"
        />
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div>实际回款</div>
        <div>（总计：{{ total.realityCollTotal }}万元）</div>
        <div class="form-title" @click="addTableItem(5)">
          <i class="iconfont icon-JC_058"></i>
        </div>
      </div>
      <div class="cost-table-box">
        <CostTable
          :tableData="tableDatas.realityColl"
          :onpenInnerDrawer="onpenInnerDrawer"
          :proName="proName"
          :proCode="proCode"
          :projectRow="projectRow"
        />
      </div>

      <div>
        <el-drawer
          :visible.sync="innerDrawer"
          :direction="direction"
          size="25%"
          :append-to-body="true"
        >
          <template slot="title">
            <div class="drawer-title">费用详情</div>
          </template>
        </el-drawer>
      </div>
      <div>
        <el-dialog
          title="新增信息"
          :visible.sync="dialogFormVisible"
          :append-to-body="true"
          :width="isPhone ? '90%' : '50%'"
        >
          <div class="head-box" slot="title">
            <div class="identifier-box"></div>
            <div>新增</div>
          </div>
          <el-form :model="dialogForm">
            <div class="dialog-form-title">项目名称&emsp;{{ proName }}</div>
            <el-form-item label="负责人" :label-width="formLabelWidth">
              <el-select
                filterable
                v-model="dialogForm.empName"
                placeholder="请选择负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="addType === 2 || addType === 3"
              label="支出类型"
              :label-width="formLabelWidth"
            >
              <el-select
                filterable
                v-model="dialogForm.detailType"
                placeholder="请选择支出类型"
              >
                <el-option
                  v-for="(item, index) in detailTypeOption"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <div v-else class="dialog-form-title">
              明细类型&emsp;{{ addType === 1 ? "合同" : "回款" }}
            </div>

            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input
                v-model="dialogForm.notes"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="日期" :label-width="formLabelWidth">
              <el-date-picker
                v-model="dialogForm.date"
                type="date"
                placeholder="请选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="金额" :label-width="formLabelWidth">
              <el-input
                v-model="dialogForm.amount"
                autocomplete="off"
                type="number"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="success" @click="determineAdd">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getProjectContractApi,
  getEmpolyeeListApi,
  getAmountDataApi,
  addAmountDataApi,
} from "@/api/index";

import CostTable from "./CostTable.vue";

export default {
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
    projectRow: {
      type: Object,
      default: false,
    },
  },
  components: {
    CostTable,
  },
  data() {
    return {
      // isPhone是否为手机端
      isPhone: this.$store.state.user.userIsPhone,
      // 项目名称
      proName: "",
      // 项目编号
      proCode: "",
      // 是否弹出抽屉
      isDrawer: false,
      // 内层抽屉
      innerDrawer: false,
      // 抽屉弹出方向
      direction: "rtl",
      // 费用数据源
      tableDatas: {
        contract: [],
        budget: [],
        reality: [],
        expectedColl: [],
        realityColl: [],
      },
      // total总数
      total: {
        contractTotal: 0,
        budgetTotal: 0,
        realityTotal: 0,
        expectedCollTotal: 0,
        realityCollTotal: 0,
      },
      // 新增的弹框
      dialogFormVisible: false,
      formLabelWidth: "120px",
      dialogForm: {
        empName: "",
        notes: "",
        date: "",
        amount: "",
        detailType: "",
      },
      // 人员列表
      perOptions: [],
      // detailType列表
      detailTypeOption: [
        {
          label: "采购",
        },
        {
          label: "差旅",
        },
        {
          label: "其他",
        },
      ],
      // 新增的类别
      addType: null,
    };
  },

  created() {
    this.getEmpolyeeList();
  },

  methods: {
    openDrawer(row) {
      this.proName = row.proshortname;
      this.proCode = row.procode;
      this.isDrawer = true;
      this.getProCollevtion(row.procode);
      this.getAmountData(row.procode);
    },

    // 打开新增弹框
    addTableItem(num) {
      this.dialogFormVisible = true;
      this.addType = num;
    },

    // 获取人员信息
    async getEmpolyeeList() {
      let res = await getEmpolyeeListApi();
      res.forEach((item, index) => {
        res[index].name = item.empname;
      });
      this.perOptions = [...res];
    },

    // 获取费用信息
    async getAmountData(code) {
      let data = {
        procode: code,
        // procode: "1C00026",
      };
      let res = await getAmountDataApi(data);
      /*
      backmoney1 预取回款
      backmoney2 实际回款
      budget 预算
      expend 实际支出
      contractinfo 合同款项
      */
      this.tableDatas.contract = [...res.contractinfo];
      this.tableDatas.contract.forEach((item, index) => {
        this.total.contractTotal = this.total.contractTotal + item.fee;
        this.tableDatas.contract[index].execdate = this.fixTimeData(
          item.execdate
        );
      });
      this.tableDatas.budget = [...res.budget];
      this.tableDatas.budget.forEach((item, index) => {
        this.total.budgetTotal = this.total.budgetTotal + item.fee;
        this.tableDatas.budget[index].execdate = this.fixTimeData(
          item.execdate
        );
      });
      this.tableDatas.reality = [...res.expend];
      this.tableDatas.reality.forEach((item, index) => {
        this.total.realityTotal = this.total.realityTotal + item.fee;
        this.tableDatas.reality[index].execdate = this.fixTimeData(
          item.execdate
        );
      });
      this.tableDatas.expectedColl = [...res.backmoney1];
      this.tableDatas.expectedColl.forEach((item, index) => {
        this.total.expectedCollTotal = this.total.expectedCollTotal + item.fee;
        this.tableDatas.expectedColl[index].execdate = this.fixTimeData(
          item.execdate
        );
      });
      this.tableDatas.realityColl = [...res.backmoney2];
      this.tableDatas.realityColl.forEach((item, index) => {
        this.total.realityCollTotal = this.total.realityCollTotal + item.fee;
        this.tableDatas.realityColl[index].execdate = this.fixTimeData(
          item.execdate
        );
      });
    },

    // 清洗时间数据
    fixTimeData(str) {
      return str.split("T")[0];
    },

    // 打开内层抽屉
    onpenInnerDrawer() {
      this.innerDrawer = true;
    },

    // 确认新增
    async determineAdd() {
      if (
        !this.dialogForm.empName ||
        !this.dialogForm.notes ||
        !this.dialogForm.date ||
        !this.dialogForm.amount
      ) {
        this.$message.warning("请将信息填写完整！！！");
        return;
      }
      let data = {
        procode: this.proCode,
        empname: this.dialogForm.empName,
        detailtype: "",
        remark: this.dialogForm.notes,
        feetype: "",
        execdate: this.dialogForm.date,
        fee: this.dialogForm.amount,
        empcode: this.$store.state.user.userCode,
      };
      switch (this.addType) {
        case 1:
          data.detailtype = "合同";
          data.feetype = "实际";
          break;
        case 2:
          data.detailtype = this.dialogForm.detailType;
          data.feetype = "预期";
          break;
        case 3:
          data.detailtype = this.dialogForm.detailType;
          data.feetype = "实际";
          break;
        case 4:
          data.detailtype = "回款";
          data.feetype = "预期";
          break;
        case 5:
          data.detailtype = "回款";
          data.feetype = "实际";
          break;
      }
      let res = await addAmountDataApi(data);
      console.log("表单提交---->", data, res);
      if (res === "添加费用详情成功") {
        this.$message.success("修改成功！！！");
        this.dialogFormVisible = false;
        this.getProCollevtion(this.proCode);
        this.getAmountData(this.proCode);
      }
    },

    // 获取回款信息
    async getProCollevtion(code) {
      let data = {
        procode: code,
      };
      let res = await getProjectContractApi(data);
      console.log("回款信息----->", res);
    },

    // 回复默认数据
    defaultData() {
      this.total.contractTotal = 0;
      this.total.budgetTotal = 0;
      this.total.realityTotal = 0;
      this.total.expectedCollTotal = 0;
      this.total.realityCollTotal = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.cost-main-box {
  .drawer-title {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    padding: 5px 5px;
    padding-right: 15px;
    margin-top: 5px;
    margin-left: 5px;
    > div {
      font-weight: bold;
    }
    .icon-guanbi:hover {
      cursor: pointer;
    }
  }

  .head-box {
    border-bottom: 1px solid #dddcdc;
    /* border: 1px solid #eb1818; */
    height: 30px;
    line-height: 30px;
    text-align: start;
    font-size: 13px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    display: flex;
    align-items: center;

    .identifier-box {
      height: 10px;
      width: 5px;
      margin-right: 6px;
      background: #11a70c;
    }

    .el-button {
      margin-left: 64%;
      height: 20px;
      line-height: 1px;
    }
  }

  .cost-table-box {
    /* border: 1px solid red; */
    padding-left: 20px;
  }

  .collection-form-box {
    display: flex;

    .left-box,
    .right-box {
      /* border: 1px solid red; */

      > div {
        /* border: 1px solid green; */
        height: 40px;
        font-size: 13px;
        line-height: 40px;
      }
    }

    .left-box {
      margin-left: 20px;
      width: 31%;
      text-align: end;
    }

    .right-box {
      width: 60%;

      > div {
        > input {
          width: 90%;
          height: 26px;
          border: 1px solid #dddcdc;
          border-radius: 4px;
          padding-left: 10px;
        }

        .el-date-editor {
          width: 95%;
        }
      }
    }
  }

  .sub-btn {
    /* border: 1px solid #dddcdc; */
    width: 100%;
    margin: 10px 0;
    display: flex;
    justify-content: end;
    padding-right: 10px;

    > div {
      /* border: 1px solid #ee1a1a; */
      text-align: center;
      height: 30px;
      width: 20%;
      margin-left: 10px;
      line-height: 30px;
      color: #fff;
      background: #57a6e7;
      border-radius: 5px;
    }

    > div:hover {
      cursor: pointer;
      background: rgba($color: #57a6e7, $alpha: 0.8);
    }
  }
}

.head-box {
  border-bottom: 1px solid #dddcdc;
  height: 30px;
  width: 703px;
  line-height: 30px;
  text-align: start;
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
  display: flex;
  align-items: center;

  .identifier-box {
    height: 10px;
    width: 5px;
    margin-right: 6px;
    background: #11a70c;
  }
}

.form-title {
  margin-left: 70%;
  margin-bottom: 10px;
}
.form-title:hover {
  cursor: pointer;
}

.el-dialog__body {
  padding: 0 !important;
}

.dialog-form-title {
  /* border: 1px solid red; */
  height: 26px;
  line-height: 26px;
  margin-left: 52px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.el-select,
.el-input,
.el-date-editor {
  width: 90%;
}

@media screen and (max-width: 768px) {
  .cost-main-box {
    .drawer-title {
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      padding: 5px 5px;
      padding-right: 15px;
      margin-top: 5px;
      margin-left: 5px;
      > div {
        font-weight: bold;
      }
      .icon-guanbi:hover {
        cursor: pointer;
      }
    }
    .head-box {
      border-bottom: 1px solid #dddcdc;
      /* border: 1px solid #eb1818; */
      height: 30px;
      width: 100%;
      line-height: 30px;
      text-align: start;
      font-size: 13px;
      font-weight: bold;
      margin-top: 10px;
      margin-bottom: 10px;
      padding-left: 20px;
      display: flex;
      align-items: center;

      .identifier-box {
        height: 10px;
        width: 5px;
        margin-right: 6px;
        background: #11a70c;
      }

      .el-button {
        margin-left: 64%;
        height: 20px;
        line-height: 1px;
      }
    }

    .cost-table-box {
      /* border: 1px solid red; */
      padding-left: 20px;
    }

    .collection-form-box {
      display: flex;

      .left-box,
      .right-box {
        /* border: 1px solid red; */

        > div {
          /* border: 1px solid green; */
          height: 40px;
          font-size: 13px;
          line-height: 40px;
        }
      }

      .left-box {
        margin-left: 20px;
        width: 31%;
        text-align: end;
      }

      .right-box {
        width: 60%;

        > div {
          > input {
            width: 90%;
            height: 26px;
            border: 1px solid #dddcdc;
            border-radius: 4px;
            padding-left: 10px;
          }

          .el-date-editor {
            width: 95%;
          }
        }
      }
    }

    .sub-btn {
      /* border: 1px solid #dddcdc; */
      width: 100%;
      margin: 10px 0;
      display: flex;
      justify-content: end;
      padding-right: 10px;

      > div {
        /* border: 1px solid #ee1a1a; */
        text-align: center;
        height: 30px;
        width: 20%;
        margin-left: 10px;
        line-height: 30px;
        color: #fff;
        background: #57a6e7;
        border-radius: 5px;
      }

      > div:hover {
        cursor: pointer;
        background: rgba($color: #57a6e7, $alpha: 0.8);
      }
    }
  }

  .form-title {
    /* border: 1px solid red; */
    margin-left: 40%;
    margin-bottom: 10px;
  }
  .form-title:hover {
    cursor: pointer;
  }

  .dialog-form-title {
    margin-left: 52px;
    margin-bottom: 10px;
  }

  .el-select,
  .el-date-editor {
    width: 100%;
  }
}
</style>